<template>
    <div>
        <el-form
                class="detail-form-content"
                ref="ruleForm"
                :model="ruleForm"
                label-width="80px"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item v-if="flag=='yonghu'" label="用户名" prop="yonghuming">
                        <el-input v-model="ruleForm.yonghuming" readonly placeholder="用户名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="flag=='yonghu'" label="姓名" prop="xingming">
                        <el-input v-model="ruleForm.xingming" placeholder="姓名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item v-if="flag=='yonghu'" label="头像" prop="touxiang">
                        <file-upload
                                tip="点击上传头像"
                                action="file/upload"
                                :limit="3"
                                :multiple="true"
                                :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
                                @change="yonghutouxiangUploadChange"
                        ></file-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="flag=='yonghu'" label="性别" prop="xingbie">
                        <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
                            <el-option
                                    v-for="(item,index) in yonghuxingbieOptions"
                                    v-bind:key="index"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="flag=='yonghu'" label="联系电话" prop="lianxidianhua">
                        <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="flag=='yonghu'" label="身份" prop="role">
                        <el-input v-model="ruleForm.role" placeholder="身份" clearable :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item v-if="flag=='yonghu'" label="个人介绍" prop="xiangqing">
                        <editor
                                style="min-width: 200px; max-width: 600px;"
                                v-model="ruleForm.xiangqing"
                                class="editor"
                                action="file/upload">
                        </editor>
                    </el-form-item>
                </el-col>
                <el-form-item v-if="flag=='users'" label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"
                              placeholder="用户名"></el-input>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onUpdateHandler">修 改</el-button>
                        <!-- 非物质文化传承人 -->
                        <el-button type="success" @click="apply(ruleForm.id)">申请</el-button>

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    // 数字，邮件，手机，url，身份证校验
    import {isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard} from "@/utils/validate";

    export default {
        data() {
            return {
                ruleForm: {},
                flag: '',
                usersFlag: false,
                yonghuxingbieOptions: [],
            };
        },
        mounted() {
            var table = this.$storage.get("sessionTable");
            this.flag = table;
            this.$http({
                url: `${this.$storage.get("sessionTable")}/session`,
                method: "get"
            }).then(({data}) => {
                if(data && data.code === 0
        )
            {
                this.ruleForm = data.data;
            }
        else
            {
                this.$message.error(data.msg);
            }
        })
            ;
            this.yonghuxingbieOptions = "男,女".split(',')
        },
        methods: {
			apply(id){
				this.$confirm(`确定要申请为'非物质文化传承人'吗?`, "提示", {
				        confirmButtonText: "确定",
				        cancelButtonText: "取消",
				        type: "warning",
				    }).then(() => {
				        this.$http({
				        url: "shenqing/apply?ids="+id,
				        method: "get",
				    }).then(({data}) => {
				        if(data && data.code === 0
				)
				    {
				        this.$message({
				            message: "申请成功",
				            type: "success",
				            duration: 1500,
				            onClose: () => {
				            this.search();
				    }
				    })
				        ;
				    }
				else
				    {
				        this.$message.error(data.msg);
				    }
				})
				    ;
				});
			},
            yonghutouxiangUploadChange(fileUrls) {
                this.ruleForm.touxiang = fileUrls;
            },
            onUpdateHandler() {
                if ((!this.ruleForm.yonghuming) && 'yonghu' == this.flag) {
                    this.$message.error('用户名不能为空');
                    return
                }
                if ((!this.ruleForm.mima) && 'yonghu' == this.flag) {
                    this.$message.error('密码不能为空');
                    return
                }
                if ('yonghu' == this.flag && this.ruleForm.lianxidianhua && (!isMobile(this.ruleForm.lianxidianhua))) {
                    this.$message.error(`联系电话应输入手机格式`);
                    return
                }
                if ('yonghu' == this.flag && this.ruleForm.money && (!isNumber(this.ruleForm.money))) {
                    this.$message.error(`余额应输入数字`);
                    return
                }
                this.$http({
                    url: `${this.$storage.get("sessionTable")}/update`,
                    method: "post",
                    data: this.ruleForm
                }).then(({data}) => {
                    if(data && data.code === 0
            )
                {
                    this.$message({
                        message: "修改信息成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {}
                })
                    ;
                }
            else
                {
                    this.$message.error(data.msg);
                }
            })
                ;
            }
        }
    };
</script>
<style lang="scss" scoped>
</style>
